<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>报修管理</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="css/main.css" media="all">
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
	<div class="x-nav">
		<span class="layui-breadcrumb"> <a><cite>首页</cite></a> <a><cite>服务管理</cite></a>
			<a><cite>投诉列表</cite></a>
		</span> <a class="layui-btn layui-btn-small"
			style="line-height: 1.6em; margin-top: 3px; float: right"
			href="javascript:location.replace(location.href);" title="刷新"><i
			class="layui-icon" style="line-height: 30px">ဂ</i></a>
	</div>
	<div class="x-body">
		<form class="layui-form x-center" action="" style="width: 800px">
			<div class="layui-form-pane" style="margin-top: 15px;">
				<div class="layui-form-item">
					<label class="layui-form-label">日期范围</label>
					<div class="layui-input-inline">
						<input class="layui-input" placeholder="开始日" name="start" id="LAY_demorange_s">
					</div>
					<div class="layui-input-inline">
						<input class="layui-input" placeholder="截止日" name="end" id="LAY_demorange_e">
					</div>
					<div class="layui-input-inline">
						<input type="text" name="roomNo" placeholder="投诉房号"
							id="room_no_kw" autocomplete="off" class="layui-input">
					</div>
					<div class="layui-input-inline" style="width: 80px">
						<button class="layui-btn" onclick="com_search()" id="search"
							type="button" lay-filter="sreach">
							<i class="layui-icon">&#xe615;</i>
						</button>
					</div>
				</div>
			</div>
		</form>
		<xblock> 
		
		
		<span class="x-right" style="line-height: 40px">共有数据：<span
			id="total" class="layui-badge">3</span> 条
		</span> </xblock>
		<table class="layui-table" id="table-1">
			<thead>
				<tr>
					<th><input type="checkbox" name="" value=""></th>
					<th>投诉编号</th>
					<th>投诉时间</th>
					<th>投诉事由</th>
					<th>处理状态</th>
					<th>处理人</th>
					<th>房间号</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td><input type="checkbox" value="1" name=""></td>
					<td>3</td>
					<td>2022-01-04 23:24:41</td>
					<td>垃圾箱爆满</td>
					<td>水龙头坏了</td>
					<td><i class="layui-icon" style="color: #06f957">&#xe605;</i>
						未处理</td>
					<td>李四</td>
					<td>101</td>
					<td class="td-manage"><a title="编辑" href="javascript:;"
						onclick="repair_edit('编辑','com-modify.jsp','2','1000','600')"
						class="ml-5" style="text-decoration: none"> <i
							class="layui-icon">&#xe642;</i>
					</a> </td>
				</tr>

			</tbody>
		</table>
		<div class="layui-card-body ">
			<div class="page">
				<div class="layui-table-page">
					<div id="layui-table-page1">
						<div class="layui-box layui-laypage layui-laypage-default"
							id="layui-laypage-2"></div>
					</div>
				</div>
			</div>
		</div>

	</div>
	<script src="lib/layui/layui.js" charset="utf-8"></script>
	<script src="js/x-layui.js" charset="utf-8"></script>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script>
		let pageNum = 1;
		let pageSize = 2;
		com_search_page();
		//ajax传商品列表
		function com_search_page() {
			pageSize = $("#layui-laypage-2 select").val();
			if (pageSize == null) {
				pageSize = 2;
			}
			$
					.ajax({
						async : true,
						type : "get",
						url : "${pageContext.request.contextPath}/ComplaintServlet",
						data : {
							op : "page",
							start : $("input[name='start']").val(),
							end : $("input[name='end']").val(),
							roomNo : $("#room_no_kw").val(),//商品关键字
							pageNum : pageNum,
							pageSize : pageSize
						},
						contentType : "application/x-www-form-urlencoded",
						dataType : "json",
						success : function(result, status, xhr) {
							$("#total").html(result.data.total);
							let content = "";
							if (result.data != null) {
								$
										.each(
												result.data.list,
												function(index, obj) {
													content += "<tr>"
															+ "<td><input type=\"checkbox\"  name=\"id\" value=\"1\" lay-skin=\"primary\"></td>"
															+ "<td>"
															+ obj.comNo
															+ "</td>" + "<td>"
															+ obj.comTime
															+ "</td>";

													content += "<td>"
															+ obj.comContent
															+ "</td>" + "<td>";
													if (obj.comStatus == 1) {
														content += "<i class=\"layui-icon\" style=\"color:red\">&#x1006未处理</i>";
													} else {
														content += "<i class=\"layui-icon\" style=\"color:#06f957\">&#xe605已处理</i>";
													}
													content += "</td>"
															+ "<td>"
															+ obj.comHandler
															+ "</td>"
															+ "<td>"
															+ obj.roomNo
															+ "</td>"
															+ "<td class=\"td-manage\">";
													if (obj.comStatus == 1) {
														content += " <a title=\"编辑\" href=\"javascript:;\" onclick=\"repair_edit('编辑','com-modify.jsp?comNo="
																+ obj.comNo
																+ "','2','1000','600')\" class=\"ml-5\" style=\"text-decoration:none\">"
																+ " <i class=\"layui-icon\">&#xe642;</i>"
																+ "</a>"
																+ "  </td>"
																+ "</tr>";
													} else {
														content += "已处理，禁止操作";
													}

												});
								$("#table-1 tbody").html(content);
							} else {
								$("#table-1 tbody").empty();
							}
							//渲染分页栏目
							let pageContent = "";
							if (result.data != null) {

								//判断是不是第一页
								if (result.data.pageNum == 1) {
									pageContent = "<a href=\"javascript:;\" class=\"layui-laypage-prev layui-disabled\" data-page=\"0\"><i class=\"layui-icon\">上一页</i></a>";
								} else {
									pageContent = "<a href=\"javascript:;\" class=\"layui-laypage-prev\" data-page=\""
											+ (result.data.pageNum - 1)
											+ "\"><i class=\"layui-icon\">上一页</i></a>";
								}
								for (let i = 1; i <= result.data.pages; i++) {
									//判断当前页码
									if (i == result.data.pageNum) {
										pageContent += "<span class=\"layui-laypage-curr\" data-page=\""+i+"\"><em class=\"layui-laypage-em\"></em><em>"
												+ i + "</em></span>";
									} else {
										pageContent += "<a href=\"javascript:;\" data-page=\""+i+"\">"
												+ i + "</a>";
									}

								}

								//判断是否是最后一页
								if (result.data.pageNum == result.data.pages) {
									pageContent += "<a href=\"javascript:;\" class=\"layui-laypage-next layui-disabled\" data-page=\""
											+ (result.data.pageNum + 1)
											+ "\"><i class=\"layui-icon\">下一页</i></a>";
								} else {
									pageContent += "<a href=\"javascript:;\" class=\"layui-laypage-next\" data-page=\""
											+ (result.data.pageNum + 1)
											+ "\"><i class=\"layui-icon\">下一页</i></a>"
								}

								pageContent += "<span class=\"layui-laypage-limits\">"
										+ "<select lay-ignore=\"\">"
										+ "<option value=\"2\" >2条/页</option>"
										+ "<option value=\"5\">5 条/页</option>"
										+ "<option value=\"10\">10 条/页</option>"
										+ "</select></span>";
								$("#layui-laypage-2").html(pageContent);

								$("#layui-laypage-2 select option")
										.each(
												function() {
													if ($(this).val() == result.data.pageSize) {
														$(this).prop(
																"selected",
																"selected");
													}
												});
							} else {
								$("#layui-laypage-2").html(pageContent);
							}
						},
						error : function() {
							alert("异步请求失败");
						}
					});
		}

		//点击页数
		$("#layui-table-page1").on("click", "#layui-laypage-2 a", function() {
			pageNum = $(this).data("page");
			com_search_page();
		});

		//确定
		$("#layui-table-page1").on("click", "#layui-laypage-2 button",
				function() {
					let inputPageNum = $("#layui-laypage-2 input").val();
					//获取最大页数
					let pageMax = $("#layui-laypage-2 input").prop("max");
					if (inputPageNum >= 1 && inputPageNum <= pageMax) {
						pageNum = inputPageNum;
						com_search_page();
					} else {
						layui.use('layer', function() {
							layer.msg("输入页码只能在1-" + pageMax + "之间", {
								icon : 2,
								time : 3000
							});
						});
					}
				});

		//条数下拉框事件
		$("#layui-table-page1").on("change", "#layui-laypage-2 select",
				function() {
					//设置页码数
					pageNum = 1;
					com_search_page();
				});

		//点击搜索

		function com_search() {
			pageNum = 1;
			com_search_page();
		};
	</script>


	<script src="lib/layui/layui.js" charset="utf-8"></script>
	<script src="js/x-layui.js" charset="utf-8"></script>
	<script>
	layui.use([ 'laydate', 'element', 'laypage', 'layer' ], function() {
		$ = layui.jquery;//jquery
		laydate = layui.laydate;//日期插件
		lement = layui.element();//面包导航
		laypage = layui.laypage;//分页
		layer = layui.layer;//弹出层

		//以上模块根据需要引入
		layer.ready(function() { //为了layer.ext.js加载完毕再执行
			layer.photos({
				photos : '#x-img'
			//,shift: 5 //0-6的选择，指定弹出图片动画类型，默认随机
			});
		});
		var start = {
			max : '2099-06-16 23:59:59',
			istoday : false,
			choose : function(datas) {
				end.min = datas; //开始日选好后，重置结束日的最小日期
				end.start = datas //将结束日的初始值设定为开始日
			}
		};

		var end = {
			max : '2099-06-16 23:59:59',
			istoday : false,
			choose : function(datas) {
				start.max = datas; //结束日选好后，重置开始日的最大日期
			}
		};

		document.getElementById('LAY_demorange_s').onclick = function() {
			start.elem = this;
			laydate(start);
		}
		document.getElementById('LAY_demorange_e').onclick = function() {
			end.elem = this
			laydate(end);
		}
	});

		//批量删除提交
		function delAll() {
			layer.confirm('确认要删除吗？', function(index) {
				//捉到所有被选中的，发异步进行删除
				layer.msg('删除成功', {
					icon : 1
				});
			});
		}

		function question_show(argument) {
			layer.msg('可以跳到前台具体问题页面', {
				icon : 1,
				time : 1000
			});
		}
		/*添加*/
		function repair_add(title, url, w, h) {
			x_admin_show(title, url, w, h);
		}
		//编辑
		function repair_edit(title, url, id, w, h) {
			url = url;
			x_admin_show(title, url, w, h);
		}

	</script>

</body>
</html>
</html>